<script setup lang="ts">
import ContentTitle from '@/components/ContentTitle/index.vue'
import PaginationAlbum from '@/components/PaginationAlbum/index.vue'
import APICommon from '@/api/common'
import ItemStyle from '@/components/ItemStyle/index.vue'

const $route = useRoute()
const $router = useRouter()

const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 16
})

const list = ref<any[]>([])

const total = shallowRef<number>(0)

function getActivityList() {
    const queryData: any = {
        category_type: $route.query.type,
        more: 1
    }
    loading.value = true
    APICommon.getActivityList(queryData, queryParams.value).then(({ data }) => {
        list.value = data
    }).finally(() => {
        loading.value = false
    })
}



watch($route, () => {
    getActivityList()
}, {
    immediate: true
})

function handleJumpActivity(id: number) {
    window.open($router.resolve(`/activity-details/${id}`).href, '_blank')
}


</script>

<template>
    <div class="video-album">
        <ContentTitle title="更多活动" style="margin: 28px 0;" />
        <div v-loading="loading">
            <el-empty description="暂无内容" v-if="list.length == 0" />
            <div class="content">
                <ItemStyle v-for="item in list" :key="item.id" :type="1" :title="item.title" :image="item.image"
                    @on-click-practice="handleJumpActivity(item.id)" />
            </div>
        </div>
        <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
            @get-list="getActivityList" />
    </div>
</template>

<style lang="scss" scoped>
.video-album {
    box-sizing: border-box;
    width: 1340px;
    padding: 0 20px;
    margin: 0 auto;
    padding-bottom: 20px;

    .content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-content: space-between;
        gap: 33px 20px;
    }

    .video-content {
        gap: 30px 28px;
        margin-bottom: 30px;
    }
}
</style>
